import React, { Component } from 'react'


import FilterFooter from '../../../../components/FilterFooter'

import styles from './index.module.css'

export default class FilterMore extends Component {
  state={
    //状态选中项的值
    selectedValues:this.props.dafaultValue
  }

  // 点击标签
  onTagClick=(value)=>{
    const {selectedValues} =this.state
    const newSelectedValue=[...selectedValues]
    if(newSelectedValue.indexOf(value) <= -1){
      newSelectedValue.push(value)
    }else{
      const index=newSelectedValue.findIndex(item=>item===value)
      newSelectedValue.splice(index,1)
    }
    this.setState({selectedValues: newSelectedValue})
  }

  // 渲染标签
  renderFilters(data) {
    const {selectedValues} =this.state
    return data.map( item => {
      const isSelected = selectedValues.indexOf(item.value)>-1
      return(
      <span
        className={[styles.tag,isSelected ? styles.tagActive:''].join(' ')}
        key={item.value}
        onClick={()=>this.onTagClick(item.value)}
      >
        {item.label}
      </span>)
    })
  }

  //清除所有选项
  onCancel=() => {
    this.setState({
      selectedValues:[],
    })
  }

  onSave=() => {
    const {type,onSave} = this.props
    onSave(type,this.state.selectedValues)
  }

  render() {
    const {
      data:{roomType,oriented,floor,characteristic},
      onCancel,
      type,
    } =this.props
    return (
      <div className={styles.root}>
        {/* 遮罩层 */}
        <div className={styles.mask} onClick={()=>onCancel(type)}></div>
        
        {/* 条件内容 */}
        <div className={styles.tags}>
          <dl className={styles.dl}>
            <dt className={styles.dt}>户型</dt>
            <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>

            <dt className={styles.dt}>朝向</dt>
            <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>

            <dt className={styles.dt}>楼层</dt>
            <dd className={styles.dd}>{this.renderFilters(floor)}</dd>

            <dt className={styles.dt}>房屋亮点</dt>
            <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
          </dl>
        </div>

        {/* 底部按钮 */}
        <FilterFooter 
          className={styles.footer} 
          cancelText='清除' 
          onCancel={this.onCancel}
          onSave={this.onSave}
        />
      </div>
    )
  }
}
